<template>
  <div class="whole">
    <p style="color: red">$event 是事件对象</p>
    <br />
    <p>组件间通信:</p>
    <p style="color: red">1.父子通信 defineProps defineEmits</p>
    <br />
    <p style="color: red">
      2.任意组件通信 mitt,类似于vue2的$bus 需要安装此插件 （体积小）
    </p>
    <br />
    <div v-if="water">儿子给父的{{ water }}</div>
    <Child :car="car" :toy="toy" @send-water="getWater" />
    <br />
    <Child2 />
    <br />

    <div>姓名:{{ username }}</div>
    <SqInput v-model="username" />
    <!-- <SqInput :modelValue="username" @update:modelValue="username=$event"/> -->

    <br />
    <div style="color: red">
      4.$attrs用于实现当前组件的父组件向当前组件的子组件通信(祖->孙)
    </div>
    <p>子组件只需要在他的组件上写 v-bind='$attrs' 就可以直接传递给孙子组件</p>
    <br />
    <Child3
      :info1="info1"
      :info2="info2"
      :info3="info3"
      :info4="info4"
      :changeNumber="changeNumber"
    />

    <br />
    <div style="color: red">
      5.$refs和$parent $refs用于父传子 $parent用于子传父
    </div>
    <p>$refs 获取当前组件下所有ref定义的组件实例</p>
    <p>$parent 在子组件使用，获取父组件的实例</p>
    <p>注意：在获取实例的时候，必须要先defineExpose 先暴露才可以获取的到</p>
    <br />

    <p>房产:{{ house }}</p>
    <button @click="changeToy">修改子组件4的玩具</button>
    <button @click="changeBook">修改子组件5的书籍</button>
    <button @click="changeToy2">修改子组件4的玩具2</button>
    <button @click="getAll($refs)">获取所有孩子</button>
    <Child4 ref="c1" />
    <Child5 ref="c2" />
    <br />
    <div style="color: red">6.provide与inject 适用于祖孙组件</div>
    <div>金钱：{{ money }} w</div>
    <div>车子：{{ cars.name }},价格{{ cars.price }}w</div>
    <Child6 />
  </div>
</template>

<script setup lang="ts" name="communication">
import Child from "./components/Child.vue";
import Child2 from "./components/Child2.vue";
import Child3 from "./components/Child3.vue";
import Child4 from "./components/Child4.vue";
import Child5 from "./components/Child5.vue";
import Child6 from "./components/Child6.vue";
import SqInput from "./components/sqInput.vue";
import { ref, reactive, provide } from "vue";
const car = ref("机车");
const toy = ref("玩具");
const water = ref("");
const username = ref("sq111");

const c1 = ref();
const c2 = ref();

const money = ref(50);
const cars = reactive({
  name: "jeep",
  price: 520,
});
const changeMoney = (v:number) => {
  money.value -= v;
};
provide("parentMony", { money, changeMoney });
provide("parentCars", cars);
const changeToy = () => {
  c1.value.toy = "乐高";
};

const changeToy2 = () => {
  c1.value.changeToy();
};
const changeBook = () => {
  c2.value.book = 2;
};

const getAll = (refs: any) => {
  for (let key in refs) {
    refs[key].book += 4;
  }
};
const house = ref(5);

const info1 = ref("信息1");
const info2 = ref("信息2");
const info3 = reactive([1, 2, 3]);
const info4 = reactive({
  name: "sq",
  age: 25,
});

const getWater = (value: string) => {
  water.value = value;
};

const changeNumber = (value: number) => {
  info3[1] += value;
};

defineExpose({ house });
</script>

<style scoped lang="scss">
.whole {
  height: 400px;
  overflow-y: scroll;
}
</style>
